<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
ul,li{
    list-style:none;
}
a{
    text-decoration: none;
    color: #fff;
}
        #contaner {
            width: 360px;
            height: 500px;
            margin: 50px auto;
            background: #222222;
        }
        #top{
            width:360px;
            height:160px;
        }


        #top div{
            width:315px;
            height: 50px;
            background: #222222;
            margin-top:5px;
            margin-left:20px;
        }
        #top div:nth-child(1){
            color: #fff;
            font-size:36px;
            line-height: 80px;
            margin-top: 0;
        }

        #top div:nth-child(2){
            line-height: 50px;
            color:#5D9DCD;

        }
        #top div:nth-child(3){
            line-height:50px;
            color: #fff;
            font-size: 20px;
            font-weight:bold;
            position: relative;
        }
        #top div:nth-child(3) span{
            position: absolute;
            width: 100px;
            height: 30px;
            top:10px;
            line-height: 30px;
            left:0;
            display: none;
            background: #222;
            cursor: pointer;
        }

        #top div:nth-child(3) #change{
            width:360px;
            height:300px;
            position: absolute;
            top:60px;
            left:-20px;
            z-index:5;
            margin:0;
            background: #222222;
            display: none;
        }
        #top div:nth-child(3) #change li{
            text-align: center;
            line-height: 70px;
            width:80px;
            height:70px;
            float: left;
            margin:1px;
            color: #fff;
            font-weight:bold;
            font-size:16px;
            box-sizing: border-box;
            border:2px solid transparent;
        }




        #top div:nth-child(3) #changeYear{
            width:360px;
            height:300px;
            position: absolute;
            top:60px;
            left:-20px;
            z-index:6;
            margin:0;
            background: #222222;
            display: none;
        }
        #top div:nth-child(3) #changeYear li{
            text-align: center;
            line-height: 70px;
            width:80px;
            height:70px;
            float: left;
            margin:1px;
            color: #fff;
            font-weight:bold;
            font-size:16px;
            box-sizing: border-box;
            border:2px solid transparent;
        }
        #top div:nth-child(3) #changeYear li.active{
            box-sizing: border-box;
            border:2px solid #ccc;
        }
        #top div:nth-child(3) #change li.active{
            box-sizing: border-box;
            border:2px solid #ccc;
        }

        #box{
            width: 360px;
            height: 335px;
        }
        #box ul:nth-child(1) li{
            margin-top:0;
        }

        #box ul li {
            cursor: pointer;
            text-align: center;
            line-height: 40px;
            list-style: none;
            float: left;
            color: #fff;
            font-weight: bold;
            box-sizing: border-box;
            border: 2px solid transparent;
        }

        #box li {
            width: 41px;
            height: 40px;
            margin: 7px 5px 0;
        }

        #box li.active {
            background: #0078D7;
        }



       #box ul:nth-child(2) li.cgcg{
           border: 2px solid #ccc;
        }
    </style>
</head>
<body>
<div id="contaner">
    <div id="top">
        <div></div>
        <div></div>
        <div>
            <a href="javascript:;">2016年5月</a>
            <span>2016</span>
            <div id="change" >
                <ul>

                </ul>
            </div>
            <div id="changeYear" >
                <ul>

                </ul>
            </div>
        </div>
    </div>
    <div id="box">
        <ul>
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul>

        </ul>
    </div>
</div>

<script src="song.js"></script>
<script>
    window.onload = function () {

        var box = document.querySelector('#box');
        var uls = box.querySelectorAll('ul');

        var big = document.getElementById('top');
        var divs=big.querySelectorAll('div');
        var changeYear = divs[2].querySelector('a');
        var yearUl = document.querySelector('#change ul');
        var change = document.querySelector('#change');
        var now = new Date();
        var topSpan = big.querySelector('span');
        var topChangeYear = document.querySelector('#changeYear');
        var topChangeYearUl = document.querySelector('#changeYear ul');
        /*
        *
        * divs[0]  时间
        * divs[1]  年月日 星期
        * divs[2]  年份
        *
        *
        */
        topSpan.innerHTML = now.getFullYear();
        changeYear.innerHTML = now.getFullYear()+'年'+(now.getMonth()+1)+'月';
        setInterval(function () {
            var a = new Date();
            divs[0].innerHTML =formatNum(a.getHours())+':'+formatNum(a.getMinutes())+':'+formatNum(a.getSeconds());
        },500);

        divs[1].innerHTML = now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日，星期'+formatWeek(now.getDay())
        var strY = '';
        for(var i=1; i<=12; i++){
            strY+='<li>'+i+'月</li>'
        }
        for(var i=1; i<=4; i++){
            strY+='<li style="color: #6e6e6e;">'+i+'月</li>'
        }
        var strZ = '';
        for(var i=2016; i<=2031; i++){
            strZ+='<li>'+i+'</li>'
        }
        topChangeYearUl.innerHTML=strZ
        yearUl.innerHTML=strY;
        changeYear.onclick=function () {
            topSpan.style.display='block';
            change.style.display='block';
            var topLis = yearUl.querySelectorAll('li');
            var topChangeLis = topChangeYearUl.querySelectorAll('li');
            for(var i=0; i<topLis.length; i++){
                topLis[i].index=i;
                topLis[i].onmouseover=function () {
                    for(var i=0; i<topLis.length; i++){
                        topLis[i].className='';
                    }
                    topLis[this.index].className='active'
                }
                topLis[i].onclick=function () {
                    topSpan.style.display='none';
                    change.style.display='none';
                    now.setMonth(parseInt(topLis[this.index].innerHTML)-1)
                    tm();
                    changeYear.innerHTML = now.getFullYear()+'年'+(now.getMonth()+1)+'月';
                    topSpan.innerHTML = now.getFullYear();
                    divs[1].innerHTML = now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日，星期'+formatWeek(now.getDay())
                }
            }

            topSpan.onclick=function () {

                topChangeYear.style.display='block';
                for(var i=0; i<topChangeLis.length; i++){
                    topChangeLis[i].index=i;
                    topChangeLis[i].onclick=function () {

                        topChangeYear.style.display='none';
                        now.setFullYear(parseInt(topChangeLis[this.index].innerHTML))
                        tm();
                        changeYear.innerHTML = now.getFullYear()+'年'+(now.getMonth()+1)+'月';
                        topSpan.innerHTML = now.getFullYear();
                        divs[1].innerHTML = now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日，星期'+formatWeek(now.getDay());

                    }
                    topChangeLis[i].onmouseover=function () {
                        for(var i=0; i<topChangeLis.length; i++){
                            topChangeLis[i].className='';
                        }
                        topChangeLis[this.index].className='active'
                    }
                }
            }
        };

        tm();

function tm() {


    //get days of this month
    function days(year, month) {
        return new Date(year, month + 1, 0).getDate();
    }
    var day=days(now.getFullYear(),now.getMonth());


    //得到这个月1号的星期
    function firstD(year,month) {
        return new Date(year,month,1).getDay();
    }
    var fD = firstD(now.getFullYear(),now.getMonth());
    //今天日期
    var today = now.getDate();
    var str='';
    var a=days(now.getFullYear(),now.getMonth()-1);
    for(var i=a-fD+1; i<=a; i++){
        str+='<li style="color: #6E6E6E;">'+i+'</li>'
    }
    for(var i=1; i<=day; i++){
        var k=i==today?k='active':'';
        str+='<li class="'+k+'">'+i+'</li>';
    }
    var nd = days(now.getFullYear(),now.getMonth());
    var od = new Date();
    od.setDate(nd);
    var t=od.getDay();
    for(var i=1; i<7-t; i++){
        str+='<li style="color: #6E6E6E">'+i+'</li>';
    }
    uls[1].innerHTML=str;

    function has0(v) {
        return v >= 10 ? "" + v : "0" + v;
    }
    //格式化星期
    function formatWeek(v){
        return	['日','一','二','三','四','五','六'][v];
    }
    var boxLi = uls[1].querySelectorAll('li');

    for(var i=0; i<boxLi.length; i++){
        boxLi[i].index = i;
        boxLi[i].onmouseover=function () {

            for(var i=0; i<boxLi.length; i++) {
                if (boxLi[i].className == "active") {
                    boxLi[i].className = 'active';
                } else {
                    boxLi[i].className = '';
                }
                boxLi[this.index].className= 'cgcg';
            }

        }
        boxLi[i].onmouseout=function () {

            for(var i=0; i<boxLi.length; i++) {
                if (boxLi[i].className == "active") {
                    boxLi[i].className = 'active';
                } else {
                    boxLi[i].className = '';
                }

            }

        }
        boxLi[i].onclick=function () {
            for(var i=0; i<boxLi.length; i++) {

                    boxLi[i].className = '';


            }
            boxLi[this.index].className = 'active';
            now.setDate(parseInt(boxLi[this.index].innerHTML));
            changeYear.innerHTML = now.getFullYear()+'年'+(now.getMonth()+1)+'月';
            topSpan.innerHTML = now.getFullYear();
            divs[1].innerHTML = now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日，星期'+formatWeek(now.getDay());



        }
    }
    function css(){
        if(arguments.length==2){
            if(arguments[0].currentStyle){
                return arguments[0].currentStyle[arguments[1]];
            }else{
                return getComputedStyle(arguments[0])[arguments[1]];
            }
        }else{
            arguments[0].style[arguments[1]]=arguments[2];
        }
    }

}


        /*css(btns[0],'width');
         css(btns[0],'width','100px');*/

        function css(){
            if(arguments.length==2){
                if(arguments[0].currentStyle){
                    return arguments[0].currentStyle[arguments[1]];
                }else{
                    return getComputedStyle(arguments[0])[arguments[1]];
                }
            }else{
                arguments[0].style[arguments[1]]=arguments[2];
            }
        }

    }
</script>

</body>
</html>